<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">银行账户信息</span>
      </el-col>
    </el-row>

    <el-row style="justify-content: center">
      <el-button @click="addRow()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-loading="loading"
                 v-show="tableData.length == 0 && canEdit && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加银行账户信息</span>
      </el-button>
      <el-button type="primary"
                 @click="addRow()"
                 style="padding: 0px 18px 0px 8px;line-height: 36px;margin: 12px 0px"
                 v-show="editable && canEdit && !showForm && tableData.length > 0" round>
        <i class="joys-icon-addagain" style="margin-right: 18px;"/>
        <span style="margin: 0px;display: inline-block;font-size: 14px;">继续添加</span>
      </el-button>
      <span v-if="tableData.length === 0 && !editable">没有数据</span>
    </el-row>
    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               ref="data"
               :rules="rules"
               v-loading = "loading"
               style="text-align: left;padding-top: 28px;"
               :class="{cardBackColor:!canEdit}"
               v-show="showForm" inline>
        <el-row style="padding:0px 12px 24px 12px">
          <el-col :md="8" :lg="6">
            <el-form-item label="银行账号" prop="accountCode">
              <ft-input :editable="!canEdit" v-model="formData.accountCode"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="银行户名" prop="accountName">
              <ft-input :editable="!canEdit" v-model="formData.accountName"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="开户银行" prop="accountBank">
              <ft-input :editable="!canEdit" v-model="formData.accountBank"
                        placeholder="请输入内容"></ft-input>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="账户性质" prop="accountProperty">
              <ft-enum-select :editing="!canEdit"
                              v-model="formData.accountProperty"
                              service-name="lss-customer"
                              type-name="accountProperty"
                              placeholder="请选账户性质">
              </ft-enum-select>
            </el-form-item>
          </el-col>
          <el-col :md="8" :lg="6">
            <el-form-item label="账户类型" prop="accountType">
              <ft-enum-select :editing="!canEdit"
                              v-model="formData.accountType"
                              service-name="lss-customer"
                              type-name="accountType"
                              placeholder="请选账户类型">
              </ft-enum-select>
            </el-form-item>
          </el-col>
        </el-row>
        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>
        <el-row style="padding: 16px 0px">
          <el-col align="right">
            <!--<el-button type="primary" @click="handleEdit(scope.$index, tableData)">修改</el-button>-->
            <el-button size="mini"
                       @click="handleCancel()"
                       v-show="!canEdit">取消
            </el-button>
            <el-button type="primary"
                       size="mini"
                       @click="onSave(formData)"
                       style="margin-left: 24px;margin-right: 36px"
                       v-show="!canEdit">保存
            </el-button>
          </el-col>
          <el-col align="right" v-show="canEdit">
            <el-button size="mini"
                       style="margin-left: 24px;margin-right: 36px"
                       @click="handleCancel()">返回
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </transition>
    <transition name="el-zoom-in-top">
      <el-table :data="tableData"
                v-show="tableData.length > 0 && !showForm"
                tooltip-effect="light">
        <el-table-column prop="accountCode" min-width="120px" align="left" label="银行账号" show-overflow-tooltip>
          <template slot-scope="scope">
            <ft-link-text @click="handleCard(scope.$index,scope.row)"
                          :text="scope.row.accountCode">
            </ft-link-text>
          </template>
        </el-table-column>
        <el-table-column prop="accountName" min-width="120px" align="left" label="银行户名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="accountBank" min-width="120px" align="left" label="开户银行" show-overflow-tooltip></el-table-column>
        <el-table-column prop="accountProperty" min-width="120px" align="left" label="账户性质" show-overflow-tooltip>
          <template slot-scope="scope">
            <ft-enum-select v-model="scope.row.accountProperty"
                            service-name="lss-customer"
                            type-name="accountProperty"
                            placeholder="请选择"
                            :editing="tableEnumEdit">
            </ft-enum-select>
          </template>
        </el-table-column>
        <el-table-column prop="accountType"  min-width="120px" align="left" label="账户类型" show-overflow-tooltip>
          <template slot-scope="scope">
            <ft-enum-select v-model="scope.row.accountType"
                            service-name="lss-customer"
                            type-name="accountType"
                            placeholder="请选择"
                            :editing="tableEnumEdit">
            </ft-enum-select>
          </template>
        </el-table-column>
        <el-table-column v-if="editable" label="操作"  min-width="120px" align="center">
          <template slot-scope="scope">
            <el-button size="small"
                       type="text"
                       @click="handleEdit(scope.$index,tableData)">编辑
            </el-button>
            <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
              <p>数据删除后，将不能恢复，确认删除？</p>
              <div style="text-align:right; margin:0">
                <el-button size="small"
                           @click="scope.row.delVisible=false">取消
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index, tableData)">确定</el-button>
              </div>
              <span slot="reference" style="margin-left:.10rem">
                  <el-button type="text" size="small" style="color:#B94A48">删除</el-button>
                </span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </transition>
  </div>
</template>

<script>

  export default {
    name: "BankAccount",
    props: {
      sourceBillId: {
        type: String,
        default: '',
      },
      customerName: {
        type: String,
        default: '',
      },
      editable: {
        type: Boolean,
        default: true,
      },
    },
    mounted() {
      this.load()
    },
    data() {
      return {
        baId: "",
        bankAccount: {},
        tableData: [],
        tableEnumEdit: false,
        formData: {
          accountName: this.customerName,
        },
        showForm: {
          type: Boolean,
          default: false
        },
        canEdit: true,
        //加载动画
        loading:false,
        rules: {
          accountCode: [
            {required: true,message: '银行账号不能为空',trigger: 'blur'},
            {max:30,message:'不得超过30字符',trigger:'blur'}],
          accountName: [
            {required: true,message: '银行户名不能为空',trigger: 'blur'},
            {max:80,message:'不得超过80字符',trigger:'blur'}],
          accountBank: [
            {required: true,message: '开户银行不能为空',trigger: 'blur'},
            {max:30,message:'不得超过30字符',trigger:'blur'}],
        },
      }

    },
    methods: {
      data() {
        return {}
      },
      load() {
        this.$http.get('/joys-rest/lss-customer/bankAccount/' + this.sourceBillId).then(
          resp => {
            this.tableData = resp.body
            this.showForm = false
        }, resp => {
          this.$message.error(resp.body)
        })

      },
      //列表编辑按钮
      handleEdit(index, row) {
        this.index = index
        this.formData = JSON.parse(JSON.stringify(row[index]))
        this.canEdit = false
        this.showForm = true
      },
      //列表删除按钮
      handleDelete(index, row) {
        this.baId = row[index].bankAccountId
        this.$http.delete('/joys-rest/lss-customer/bankAccount/' + this.baId).then(
          resp => {
            row.splice(index, 1)
            this.$message.success('删除成功!')
          },
          resp => {
            this.$message.error(resp.body)
        })
      },
      //列表取消
      handleCancel() {
        this.showForm = false
        this.canEdit = true
        this.$refs.data.clearValidate()
      },
      //列表增行
      addRow() {
        this.formData = {
          sourceBillId: this.sourceBillId,
          sourceBillType: 'CUSTOMER',
          accountName: this.customerName,
        }
        this.index = -1
        this.canEdit = false
        this.showForm = true
      },
      //保存
      onSave(formData) {
        this.loading = true
        this.$refs.data.validate((valid) => {
          if (valid) {
            this.bankAccount = formData;
            this.$http.put('/joys-rest/lss-customer/custInfo/bankAccount/save/', this.bankAccount).then(resp => {
              if (this.index == -1) {
                this.tableData.push(resp.body)
              } else {
                this.tableData.splice(this.index, 1, resp.body)
              }
              this.canEdit = true
              this.showForm = false
              this.loading = false
              this.$message.success('保存成功!')
            }, resp => {
              this.loading = false
              this.$message.error(resp.body)
            })
          } else {
            this.loading=false
            return false
          }
        })
      },
      //列表卡片按钮
      handleCard(index, row) {
        this.formData = row;
        this.canEdit = true;
        this.showForm = true
      },
      //字数较多时，超出部分用...显示
      convertInputValue(val) {
        if (null != val && '' != val && val.length > 9) {
          return val.substr(0, 9) + '...'
        }
        return val
      },
    },
  }
</script>
<style>
  .cardBackColor {
    background-color: #F4F8F9;
    margin-bottom: 4px;
  }

  .tableClass .cell {
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<style scoped>

</style>
